import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import '../../../app_files.dart';
import 'action.dart';
import 'state.dart';

Widget buildView(
    UserRegisterViewState state, Dispatch dispatch, ViewService viewService) {
  return WillPopScope(
      child: Scaffold(
        resizeToAvoidBottomPadding: false,
        backgroundColor: Colors.white,
        body: GestureDetector(
          child: Stack(
            children: [
              Image.asset(
                'images/login_bg.png',
                fit: BoxFit.fitWidth,
                width: double.infinity,
              ),
              Positioned(
                child: Align(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset('images/login_logo.png'),
                      Padding(
                        padding: EdgeInsets.only(top: 11),
                        child: Text(
                          '气通千里 万家旺火',
                          style: TextStyle(
                            color: Color(0xfffafafa),
                            fontSize: 16,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                top: 30 + ScreenUtil.statusBarHeight,
                left: 0,
                right: 0,
              ),
              Column(
                children: [

                  Expanded(
                    child: Container(
                      margin: EdgeInsets.only(
                          top: 150 + ScreenUtil.statusBarHeight,
                          left: 16,
                          right: 16),
                      child: Column(
                        children: [

                          Container(
                            padding: EdgeInsets.only(top: 20, left: 16, right: 16),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(20),
                                  topRight: Radius.circular(20)),
                              color: Colors.white,
                              boxShadow: [
                                BoxShadow(
                                  color: Color(0xff4D81EF),
                                  blurRadius: 16,
                                ),
                              ],
                            ),
                            width: double.infinity,
                            height: 420,
                            child: Column(
                              children: [

                                Image.asset('images/user_register.png'),
                                Container(
                                  margin: EdgeInsets.only(top: 20,bottom: 20),
                                  decoration: BoxDecoration(
                                    borderRadius:
                                    BorderRadius.all(Radius.circular(5)),
                                    color: Color(0xffE8F2FC),
                                  ),
                                  child: Row(
                                    children: [
                                      Container(
                                        width: 40,
                                        child: Align(
                                          child: Image.asset('images/lg_account.png'),
                                        ),
                                      ),
                                      Container(
                                        color: ThemeConfig.rgba(75, 124, 228, 0.25),
                                        height: 20,
                                        width: 1,
                                      ),
                                      Expanded(
                                        child:
                                        Container(
                                          padding:
                                          EdgeInsets.only(left: 14, right: 10),
                                          child: TextField(
                                            textInputAction: TextInputAction.done,
                                            controller: state.phoneController,
                                            style: TextStyle(
                                                fontSize: 14,
                                                color: ThemeConfig.mainColor),
//                      keyboardType: TextInputType.phone,
                                            decoration: InputDecoration(
                                              border: InputBorder.none,
                                              hintText: "请输入您的手机号",
                                              hintStyle: TextStyle(
                                                  fontSize: 14,
                                                  color: ThemeConfig.mainColor),
                                            ),
                                            onChanged: (String str) {
                                              if (str.length >
                                                  ThemeConfig.passwordTextLength)
                                                state.phoneController.text =
                                                    str.substring(
                                                        0,
                                                        ThemeConfig
                                                            .passwordTextLength);
                                            },
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),

                                Container(
                                  margin: EdgeInsets.only(bottom: 20),
                                  decoration: BoxDecoration(
                                    borderRadius:
                                    BorderRadius.all(Radius.circular(5)),
                                    color: Color(0xffE8F2FC),
                                  ),
                                  child: Row(
                                    children: [
                                      Container(
                                        width: 40,
                                        child: Align(
                                          child: Image.asset('images/lg_password.png'),
                                        ),
                                      ),
                                      Container(
                                        color: ThemeConfig.rgba(75, 124, 228, 0.25),
                                        height: 20,
                                        width: 1,
                                      ),
                                      Expanded(
                                        child: Container(
                                          padding:
                                          EdgeInsets.only(left: 14, right: 10),
                                          child: TextField(
                                            controller: state.passwordController,
                                            textInputAction: TextInputAction.done,
                                            obscureText: true,
                                            style: TextStyle(
                                                fontSize: 14,
                                                color: ThemeConfig.mainColor),
                                            decoration: InputDecoration(
                                              border: InputBorder.none,
                                              hintText: "请输入您的密码",
                                              hintStyle: TextStyle(
                                                fontSize: 14,
                                                color: ThemeConfig.mainColor,
                                              ),
                                            ),
                                            onChanged: (String str) {
                                              if (str.length >
                                                  ThemeConfig.passwordTextLength)
                                                state.passwordController.text =
                                                    str.substring(
                                                        0,
                                                        ThemeConfig
                                                            .passwordTextLength);
                                            },
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                                Container(
                                  decoration: BoxDecoration(
                                    borderRadius:
                                    BorderRadius.all(Radius.circular(5)),
                                    color: Color(0xffE8F2FC),
                                  ),
                                  child: Row(
                                    children: [
                                      Container(
                                        width: 40,
                                        child: Align(
                                          child: Image.asset('images/lg_password.png'),
                                        ),
                                      ),
                                      Container(
                                        color: ThemeConfig.rgba(75, 124, 228, 0.25),
                                        height: 20,
                                        width: 1,
                                      ),
                                      Expanded(
                                        child: Container(
                                          padding:
                                          EdgeInsets.only(left: 14, right: 10),
                                          child: TextField(
                                            controller: state.passwordTwoController,
                                            textInputAction: TextInputAction.done,
                                            obscureText: true,
                                            style: TextStyle(
                                                fontSize: 14,
                                                color: ThemeConfig.mainColor),
                                            decoration: InputDecoration(
                                              border: InputBorder.none,
                                              hintText: "请确认您的密码",
                                              hintStyle: TextStyle(
                                                fontSize: 14,
                                                color: ThemeConfig.mainColor,
                                              ),
                                            ),
                                            onChanged: (String str) {
                                              if (str.length >
                                                  ThemeConfig.passwordTextLength)
                                                state.passwordTwoController.text =
                                                    str.substring(
                                                        0,
                                                        ThemeConfig
                                                            .passwordTextLength);
                                            },
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),

                                Expanded(child: Container()),
                                Container(
                                  margin: EdgeInsets.only(
                                      left: 17, right: 17,bottom: 35),
                                  height: 50,
                                  decoration: BoxDecoration(
                                    color: ThemeConfig.mainColor,
                                    borderRadius:
                                    BorderRadius.all(Radius.circular(4)),
                                  ),
                                  child: InkWell(
                                    child: Center(
                                      child: Text(
                                        '立即注册',
                                        style: TextThemeConfig.Font18WithColorWhite,
                                      ),
                                    ),
                                    onTap: () =>
                                        dispatch(UserRegisterViewActionCreator.onSubmit()),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          // Expanded(child: Container()),
                        ],
                      ),
                    ),
                  ),

                  Image.asset('images/lg_bottom.png',width: double.infinity,fit: BoxFit.fitWidth,)
                ],
              ),
              Positioned(
                child: GestureDetector(
                  behavior: HitTestBehavior.translucent,
                  child: Container(
                    width: 40,
                    height: 40,
                    child: Icon(
                      CupertinoIcons.back,
                      color: Colors.white,
                    ),
                  ),
                  onTap: ()=> Navigator.pop(viewService.context),
                ),
                top: ScreenUtil.statusBarHeight ,
                left: 12,
              ),
            ],
          ),
          behavior: HitTestBehavior.translucent,
          onTap: () => CommonUtils.closeKey(viewService.context),
        ),
      ),
      onWillPop: () async {
        return false;
      });
}
